.detail-info-header-img {
 width: 100vw;
 height: 362px;
}

.detail-info-content {
 position: relative;
 top: -30px;
 width: auto;

 border-radius: 18px;
 background-color: #fff;
 padding: 20px;
}

.detail-info-content-img {
 width: 100%;
 height: 100%;
 border-radius: 18px;
}


.detail-info-content-title {
 font-size: 30px;
 font-weight: bold;
 margin: 10px 0 13px 0;
}

.detail-info-content-desc {
 font-size: 17px;
 color: #1E2432;
 margin-top: 26px;
}

.detail-info-content-photos {
 margin-top: 16px;
 font-size: 22px;
 font-weight: 500;
 font-family: serif;
}

.detail-info-content-photos-list {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;

}

.detail-info-content-photos-list-img {
 width: 96px;
 height: 96px;
 margin-top: 10px;

 &:active {
  opacity: 0.9;
 }
}

.detail-info-book-tickets-btn {
 width: 335px;
 height: 44px;
 background: #1E2432;
 margin: 0 auto;
 bottom: 0;
 border-radius: 13px;
 color: #fff;

 &:active {
  opacity: 0.8;
 }
}

.detail-info-preview-img {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 width: 80vw;
 animation: fade-in-fwd 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes fade-in-fwd {
 0% {
  // transform: translateZ(-80px);
  opacity: 0;
 }

 100% {
  // transform: translateZ(0);
  opacity: 1;
 }
}